<!DOCTYPE   html>
<html   lang="en">
<head>
       <meta   charset="UTF-8">
       <meta   name="viewport"   content="width=device-width,   initial-scale=1.0">
       <title>修改用户信息</title>
       <!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
       <style>
           body  {
               font-family:  Arial,  sans-serif;
               background-color:  #f2f2f2;
           }

           h1  {
               color:  #333;
               font-size:  2em;
               margin-bottom:  1em;
           }

           form  {
               width:  50%;
               margin:  0  auto;
               padding:  20px;
               background-color:  #fff;
               border-radius:  5px;
               box-shadow:  0  2px  5px  rgba(0,  0,  0,  0.1);
           }

           label  {
               display:  block;
               margin-bottom:  5px;
           }

           input,  select,  textarea  {
               width:  100%;
               padding:  10px;
               margin-bottom:  20px;
               border:  1px  solid  #ccc;
               border-radius:  3px;
           }
           input[type="radio"]  {
               margin-right:  10px;
               width:  20px;
               display: inline-block;
           }
           label{
           	display: inline-block;
           }
           

           button[type="submit"]  {
               width:  100%;
               padding:  10px;
               background-color:  #007bff;
               color:  #fff;
               border:  none;
               border-radius:  3px;
               cursor:  pointer;
           }

           button[type="submit"]:hover  {
               background-color:  #0056b3;
           }
       </style>
</head>
<body>
       
       <form action="/orderSystem/updateUser.do" method="Post" id="app">
       	   <input type="hidden" v-model='user.id' name="id">
           <label   for="username">用户名：</label>
           <input    type="text" v-model="user.username"  id="username"   name="username"   required><br><br>

           <label   for="password">密码：</label>
           <input    type="password"  v-model="user.password" id="password"   name="password"   required><br><br>

           <label   for="age">年龄：</label>
           <select   id="age"   name="age" v-model="user.age"  required >
               <option   value="18">18岁</option>
               <option   value="19">19岁</option>
               <option   value="20">20岁</option>
               <option   value="21">21岁</option>
               <option   value="22">22岁</option>
               <option   value="23">23岁</option>
               <option   value="24">24岁</option>
               <option   value="25">25岁</option>
               <option   value="26">26岁</option>
           </select><br><br>

           <label   for="gender">性别：</label>
           <input  v-if="user.gender=='男'" checked="checked" type="radio"   id="male"   name="gender"   value="男"   required>
           <input  v-else  type="radio"   id="male"   name="gender"   value="男"   required>
           <label   for="male">男</label>
           
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input  v-if="user.gender=='女'" checked="checked"  type="radio"   id="female"   name="gender"   value="女"   required>
            <input  v-else  type="radio"   id="male"   name="gender"   value="女"   required>
           <label   for="female">女</label>
   
           <br><br>

           <label   for="remark">备注：</label>
           <textarea   id="remark" v-model="user.remake"  name="remark"   cols="30"   rows="10"   required></textarea><br><br>

           <input    type="submit"   value="更新">
       </form>
       <script type="text/javascript">
	       function parseUrlParams() {
	    	    var url = window.location.href;		//获取当前页面的URL地址
	    	    var paramString = url.split('?')[1];	//获取？之后的数据
	    	    var paramPairs = paramString.split('&');//解析获取的数据
	    	    var params = {};
	
	    	    paramPairs.reduce(function(params, pair) {
	    	        var parts = pair.split('=');
	    	        var key = parts[0];
	    	        var value = decodeURIComponent(parts[1] || '');
	
	    	        if (params[key]) {
	    	            params[key].push(value);
	    	        } else {
	    	            params[key] = [value];
	    	        }
	
	    	        return params;
	    	    }, params);
	
	    	    return params;
	    	}     		
	       
	       let vue = new Vue({
				el: '#app',
				data:{
					user:{
						username: '',
						password: '',
						age: '',
						gender: '',
						remake: '',
						id: ''
					}
				},
				created(){
					params = parseUrlParams();
					//url: 表示异步请求地址
					axios.get('/orderSystem/selectUserById.do?id='+params.id[0]).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.user = res_obj.data; 
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			});
	</script>
</body>
</html>